<template>
  <div id="left-bottom"></div>
</template>
<script setup lang="ts">
import { city } from "../const";
import { onMounted, ref } from "vue";
//@ts-ignore
import echarts from "@/hooks/useEcharts";
//@ts-ignore
import { contractBussines } from "@/api/dataScreen/index.js";
import { ElMessage } from "element-plus";

const colors = [
  "#178BFF",
  "#55E6CD",
  "#58a55c",
  "#f2bd42",
  "#ee752f",
  "#d95040",
  "#ED4FEC",
];

onMounted(() => {
  getData("");
});
// x轴 列表
let month = ref();
// y轴 plannedReturn 计划回款  receivedMoney 已回款
let returnList = ref();
let receiveList = ref();
const echartData = ref([]);

const dataList = ref([]);

const initEchats = async () => {
  var chartDom = document.getElementById("left-bottom");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    color: colors,
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      // top: 12,
      icon: "circle",
      // l: 0,
      itemHeight: 8,
      itemWidth: 8,
    },
    textStyle: {
      fontSize: 10,
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        center: ["49%", "50%"],
        avoidLabelOverlap: false,
        // itemStyle: {
        //   // borderRadius: 10,
        //   borderColor: "#fff",
        //   borderWidth: 2,
        // },
        // formatter: "{a} <br\/>{b} : {c}%",
        label: {
          formatter: "{b} \n{d}%({c})",
          // formatter: "{b} \n{d}%",
        },
        // normal: {
        //   label: {
        //     show: true,
        //     fontSize: 10,
        //   },
        // },

        labelLine: {
          show: true,
          normal: {
            length: 6, //第一条线
            length2: 12, //第二条线
          },
        },
        data: echartData.value.map((item, index) => {
          item.label = {
            color: colors[index],
          };
          return item;
        }),
      },
    ],
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

const getData = async (date: any) => {
  const data = {
    times: date,
  };
  const response = await contractBussines(data);
  if (response.code === 200 && response.data) {
    echartData.value = response.data.map((item) => ({
      name: item.name,
      value: item.value,
    }));
  } else {
    ElMessage.error(response.msg);
  }
  initEchats();
};

defineExpose({ getData });
</script>
